<template>
  <div class="icon1Main">
    <sequence></sequence>
    <img class="icon" ref="icon" src="./assets/icon.png" alt="">
  </div>
</template>

<script>
import sequence from './sequence/index.vue'
import { gsap } from 'gsap';
export default {
  name: "icon1",
  components: {sequence},
  mounted() {
    this.animateIcon();
  },
  methods: {
    animateIcon() {
      gsap.to(this.$refs.icon, {
        y: -5, // 向上移动 10px
        duration: 1, // 动画持续时间为 1 秒
        yoyo: true, // 动画在到达目标值和开始值之间切换
        repeat: -1, // 动画无限重复
        ease: 'sine.inOut' // 使用 sine.inOut 缓动效果
      });
    }
  }
}
</script>

<style lang="less" scoped>
  .icon1Main {
    width: 84px;
    height: 82px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    img {
      width: 32px;
      margin-left: 20px;
    }
  }
</style>
